<template>
  <div class="box123">
    <el-table :data="jisuan" stripe height="465">
      <el-table-column prop="id" label="编号" />
      <el-table-column prop="title" label="楼盘名称" />
      <el-table-column prop="type" label="房源类型" />
      <el-table-column prop="num" label="门牌号" />
      <el-table-column prop="hometype" label="房源户型" />
      <el-table-column prop="name" label="户主" width="70" />
      <el-table-column align="right">
        <template #header>
          <el-input size="small" placeholder="查找" v-model="keyword" />
        </template>
      </el-table-column>
    </el-table>
    <div class="demo-pagination-block">
      <el-pagination
        v-model:currentPage="currentPage2"
        v-model:page-size="pageSize2"
        :page-sizes="[10, 20, 30, 40]"
        :small="small"
        :disabled="disabled"
        :background="background"
        layout="sizes, prev, pager, next"
        :total="listnum"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from "vue";
import { residents, residentss } from "../axios/http";
const tableData = ref([]);
const currentPage2 = ref(1);
const pageSize2 = ref(10);
const small = ref(false);
const background = ref(false);
const disabled = ref(false);
const listnum = ref<number>();
// 查找关键字
const keyword = ref<string>("");
// 请求住户列表长度
const leght = async () => {
  const acc = await residentss();
  console.log(acc);
  listnum.value = acc as any;
};
leght();
// 请求住户分页
const res = async (num = 1, num2 = pageSize2.value) => {
  const arr = await residents(num, num2);
  tableData.value = arr.data;
  console.log(tableData.value);
};
res();
const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`);
  res(currentPage2.value, val);
};
const handleCurrentChange = (val: number) => {
  res(val);
};
// 计算关键字 查找数组
const jisuan = computed(() => {
  let ccc: Array<any> = [];
  tableData.value.map((itm) => {
    for (let item in itm) {
      if (String(itm[item]).indexOf(keyword.value) > -1) {
        ccc.push(itm);
      }
    }
  });
  ccc = Array.from(new Set([...ccc]));
  return ccc;
});
</script>
<style scoped>
.box123 {
  width: 100%;
  height: 100%;
  flex-direction: column;
}
</style>
